<template>
  <div class="box">
    <var-sticky :offset-top="0" class="top">
      <var-app-bar title="图库" title-position="center" />
      <var-tabs elevation v-model:active="active">
        <var-tab v-for="it in imgType" @click="selectType(it.value)">
          {{ it.title }}
        </var-tab>
      </var-tabs>
    </var-sticky>
    <div class="body" ref="body">
      <var-image
        v-for="item in imgList"
        class="img"
        ripple
        lazy
        :src="item.url"
        :loading="loading"
        :error="loading"
        @click="preview(item.url)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { getImgList2 } from '@/api/imgs'
import { ImagePreview } from '@varlet/ui'
import loading from '@/assets/images/loading3.gif'
import _ from 'lodash'
import { onBeforeRouteLeave } from 'vue-router'
import { useRoute } from 'vue-router'
const $route = useRoute()
const body: any = ref(null)
const active = ref(0)
const page = ref(1)
const size = ref(10)
const type = ref('')
const imgList: any = ref([])
const top = ref(0)
const imgType = [
  { title: '全部', value: '' },
  { title: '动物', value: 'animal' },
  { title: '美女', value: 'beauty' },
  { title: '汽车', value: 'car' },
  { title: '漫画', value: 'comic' },
  { title: '食物', value: 'food' },
  { title: '游戏', value: 'game' },
  { title: '电影', value: 'movie' },
  { title: '人物', value: 'person' },
]
const selectType = (val: string) => {
  type.value = val
  imgList.value = []
  page.value = 1
  getData()
}
const getData = async () => {
  const obj = {
    page: page.value,
    size: size.value,
    type: type.value,
  }
  const res = await getImgList2(obj)
  imgList.value = [...imgList.value, ...res.result.list]
}
const preview = (src: string) => {
  ImagePreview({
    images: [src],
    closeable: true,
  })
}

// 滚动事件处理函数
const handleScroll = _.throttle(() => {
  if (body.value) {
    const containerHeight = body.value.scrollHeight
    const scrollTop = body.value.scrollTop
    const clientHeight = body.value.clientHeight
    // 计算滚动条距离底部的距离
    const scrollDistanceFromBottom =
      containerHeight - (scrollTop + clientHeight)
    if (scrollDistanceFromBottom <= 50) {
      page.value++
      getData()
    }
  }
}, 1000)

onMounted(() => {
  getData()
  if (body.value) {
    body.value.addEventListener('scroll', handleScroll)
  }
  watch(
    () => $route,
    (to, from) => {
      if (from && from.path == '/img2') body.value.scrollTop = top.value
    },
    { immediate: true, deep: true }, // 立即执行一次且深度监听
  )
})
// 在组件卸载时移除事件监听器
onUnmounted(() => {
  if (body.value) {
    body.value.removeEventListener('scroll', handleScroll)
  }
})

onBeforeRouteLeave(() => {
  top.value = body.value.scrollTop
})
</script>

<script lang="ts">
export default {
  name: 'news',
}
</script>

<style scoped lang="scss">
.box {
  height: 100%;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 5px;

    .img {
      width: 100%;
      display: block;
      margin-bottom: 10px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
